import React from 'react'

import {
  Accordion,
  List,
} from 'antd-mobile'

import styles from './index.less'

export default class MyAccordion extends React.Component {
  onChange = (key) => {
  }

  render() {
    const { data } = this.props

    return (
      <div style={{ marginTop: 10, marginBottom: 10 }}>
        <Accordion
          {...this.props}
          defaultActiveKey="0"
          onChange={this.onChange}>
          {
            data.map(item => (
              <Accordion.Panel header={item.header}>
                {item.children.length ? item.children.map(item => (
                  <List>
                    <List.Item extra={item.value}>
                      {item.title}
                    </List.Item>
                  </List>
                )) : null}
                <div className={styles.moreBtn}>
                  {
                    item.isMore ? (
                      <a onClick={item.handleClick}>更多详情</a>
                    ) : null
                  }
                </div>
              </Accordion.Panel>
            ))
          }
        </Accordion>
      </div>
    );
  }
}